// @ts-nocheck
import React, { useRef } from 'react';
import root from '../../index.js'

// class Hooks extends React.Component {

//   state = {
//     count: 0
//   }

//   myRef = React.createRef ()

//   add = () => {
//     this.setState ((state) => {
//       return {count: state.count + 1}
//     })
//   }

//   componentDidMount () {
//     this.timer = setInterval (() => {
//       this.setState ((state) => {
//         return {count: state.count + 1}
//       })
//     }, 1000)
//   }

//   unmount = () => {
//     root.unmount (document.getElementById ('root'))
//   }

//   componentWillUnmount () {
//     clearInterval (this.timer)
//   }

//   show = () => {
//     console.log (this.myRef)
//     alert (this.myRef.current.value)
//   }

//   render() {
//     return (
//       <div>
//         <input type="text"  ref={this.myRef}/>
//         <h2>求和为：{this.state.count}</h2>
//         <button onClick={this.add}>+1</button>
//         <button onClick={this.unmount}>卸载</button>
//         <button onClick={this.show}>show</button>
//       </div>
//     );
//   }
// }

function Hooks() {

  const [count,setCount] = React.useState (0)

  const myRef = useRef ()

  React.useEffect (() => {
    // console.log ('@') 相当于didmount 和 didupdate
    let timer = setInterval (() => {
      setCount ((count) => count + 1)
    }, 1000)
    // 返回的函数相当于willunmount
    return () => {
      clearInterval (timer)
    }
  }, [])

  function add () {
    // setCount (count + 1) 第一种写法
    setCount ((count) => count + 1)
  }

  function unmount () {
    root.unmount (document.getElementById ('root'))
  }

  function show () {
    alert (myRef.current.value)
  }

  return (
    <div>
      <input type="text" ref={myRef} />
      <h2>求和为：{count}</h2>
      <button onClick={add}>+1</button>
      <button onClick={unmount}>卸载</button>
      <button onClick={show}>show</button>
    </div>
  )
}

export default Hooks;
